<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="search-card">
        <div slot="header" class="search-header">
          <el-input
            v-model="searchKeyword"
            placeholder="请输入关键词搜索文章"
            clearable
            @keyup.enter.native="handleSearch"
            @clear="handleClear"
            size="large"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </div>
        <div v-if="searchKeyword && searchResults.length > 0" class="search-results">
          <div class="result-header">
            <span>找到 <strong>{{ totalResults }}</strong> 条相关结果</span>
          </div>
          <div class="result-list">
            <el-card 
              v-for="result in searchResults" 
              :key="result.id"
              shadow="hover"
              class="result-item"
              @click.native="goToBlog(result.id)"
            >
              <div class="result-title">
                <h3 v-html="highlightKeyword(result.title)"></h3>
              </div>
              <div class="result-content" v-html="highlightKeyword(result.content)"></div>
              <div class="result-meta">
                <span class="meta-item">
                  <i class="el-icon-user"></i>
                  {{ result.author }}
                </span>
                <span class="meta-item">
                  <i class="el-icon-date"></i>
                  {{ result.date }}
                </span>
                <span class="meta-item">
                  <i class="el-icon-view"></i>
                  {{ result.views }} 次阅读
                </span>
              </div>
            </el-card>
          </div>
          <el-pagination
            v-if="totalResults > pageSize"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalResults"
            layout="prev, pager, next"
            class="pagination"
          ></el-pagination>
        </div>
        <div v-else-if="searchKeyword && searchResults.length === 0" class="no-results">
          <el-empty description="没有找到相关文章">
            <el-button type="primary" @click="handleClear">清空搜索</el-button>
          </el-empty>
        </div>
        <div v-else class="search-tips">
          <el-alert
            title="搜索提示"
            type="info"
            :closable="false"
            show-icon
          >
            <div slot="description">
              <p>• 支持文章标题和内容搜索</p>
              <p>• 可以输入多个关键词，用空格分隔</p>
              <p>• 支持模糊匹配和精确匹配</p>
            </div>
          </el-alert>
          <div class="hot-keywords">
            <h4>热门关键词</h4>
            <el-tag
              v-for="keyword in hotKeywords"
              :key="keyword"
              @click="searchByKeyword(keyword)"
              type="info"
              effect="plain"
              class="keyword-tag"
            >
              {{ keyword }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchKeyword: '',
      searchResults: [],
      totalResults: 0,
      currentPage: 1,
      pageSize: 10,
      hotKeywords: ['Vue', 'React', 'JavaScript', 'Java', 'Spring', '算法', '前端', '后端', '数据库'],
      allResults: [
        {
          id: 1,
          title: 'Vue3 组合式API深度解析',
          content: 'Vue3 引入了组合式API，这是一种全新的组件编写方式，可以让代码更加灵活和可复用...',
          author: '张三',
          date: '2024-12-15',
          views: 1250
        },
        {
          id: 2,
          title: 'JavaScript异步编程实践',
          content: 'JavaScript中的异步编程是前端开发中的重要概念，本文将介绍Promise、async/await等异步编程方式...',
          author: '李四',
          date: '2024-12-10',
          views: 980
        },
        {
          id: 3,
          title: 'React Hooks最佳实践',
          content: 'React Hooks是React 16.8引入的新特性，它可以让函数组件拥有状态和生命周期...',
          author: '王五',
          date: '2024-12-05',
          views: 1100
        },
        {
          id: 4,
          title: 'Spring Boot微服务架构',
          content: 'Spring Boot是构建微服务架构的理想选择，本文将介绍如何使用Spring Boot构建微服务...',
          author: '赵六',
          date: '2024-11-25',
          views: 850
        },
        {
          id: 5,
          title: 'MySQL性能优化技巧',
          content: 'MySQL数据库性能优化是后端开发中的重要课题，本文将介绍一些常用的优化技巧...',
          author: '钱七',
          date: '2024-11-20',
          views: 720
        }
      ]
    }
  },
  mounted() {
    // 从路由参数获取搜索关键词
    if (this.$route.query.keyword) {
      this.searchKeyword = this.$route.query.keyword
      this.handleSearch()
    }
  },
  methods: {
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.$message.warning('请输入搜索关键词')
        return
      }
      
      // 模拟搜索
      const keyword = this.searchKeyword.toLowerCase()
      this.searchResults = this.allResults.filter(item => {
        return item.title.toLowerCase().includes(keyword) || 
               item.content.toLowerCase().includes(keyword)
      })
      
      this.totalResults = this.searchResults.length
      this.currentPage = 1
      
      if (this.searchResults.length === 0) {
        this.$message.info('没有找到相关文章')
      }
    },
    handleClear() {
      this.searchKeyword = ''
      this.searchResults = []
      this.totalResults = 0
      this.currentPage = 1
    },
    handlePageChange(page) {
      this.currentPage = page
      // 这里可以添加分页逻辑
    },
    searchByKeyword(keyword) {
      this.searchKeyword = keyword
      this.handleSearch()
    },
    highlightKeyword(text) {
      if (!this.searchKeyword) return text
      const regex = new RegExp(`(${this.searchKeyword})`, 'gi')
      return text.replace(regex, '<mark>$1</mark>')
    },
    goToBlog(id) {
      this.$router.push({
        path: '/cmsBlog',
        query: { id }
      })
    }
  }
}
</script>

<style scoped>
.search-card {
  margin-top: 20px;
}

.search-header {
  padding: 10px 0;
}

.search-results {
  margin-top: 20px;
}

.result-header {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-header strong {
  color: #409eff;
  font-size: 18px;
}

.result-list {
  margin-bottom: 20px;
}

.result-item {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-title h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
}

.result-title h3 mark {
  background-color: #ffd04b;
  color: #303133;
  padding: 2px 4px;
  border-radius: 2px;
}

.result-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.result-content mark {
  background-color: #ffd04b;
  color: #303133;
  padding: 2px 4px;
  border-radius: 2px;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #909399;
  font-size: 12px;
}

.meta-item i {
  margin-right: 4px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.no-results {
  padding: 40px 0;
  text-align: center;
}

.search-tips {
  padding: 20px 0;
}

.hot-keywords {
  margin-top: 30px;
}

.hot-keywords h4 {
  margin-bottom: 15px;
  color: #303133;
}

.keyword-tag {
  margin: 5px 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.keyword-tag:hover {
  background-color: #409eff;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .result-meta {
    flex-direction: column;
    gap: 5px;
  }
}
</style>

